<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
    <title>制作头像</title>
    <style>
        .upload-file {
            margin: 0 auto;
            position: relative;
            width: 80%;
            padding: 10px 15px;
            border: 1px solid rgb(119, 154, 80);
            border-radius: 5px;
            background-color: rgb(66, 215, 143);
            color: #333333;
            font-size: 14px;
            text-align: center;
            overflow: hidden;
        }

        .upload-file span {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .upload-file:hover {
            font-size: 15px;
            border-color: rgb(39, 226, 81);
        }

        .upload-file input[type='file'] {
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            right: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div style="text-align: center;">
        <img id="tmp" src="" width="1024px" height="683px" hidden />
        <img id="touxiang" src="" width="683px" height="683px" />
    </div>
    <div class="upload-file">
        <input type="file" class="input-file" id="file" accept="image/*">
        <span class="tip">点击上传图片</span>
    </div>
    <div style="text-align:center"><span>生成之后长按图片保存</span></div>
    <script>
        document.documentElement.addEventListener('touchstart', function (event) {
            if (event.touches.length > 1) {
                event.preventDefault();
            }
        }, false);

        var lastTouchEnd = 0;
        document.documentElement.addEventListener('touchend', function (event) {
            var now = Date.now();
            if (now - lastTouchEnd <= 300) {
                event.preventDefault();
            }
            lastTouchEnd = now;
        }, false);

        let file = document.getElementById("file")
        let userImage = new Image()
        let touxiang = document.getElementById("touxiang")
        let tmp = document.getElementById("tmp")
        /** @type {HTMLCanvasElement} */
        let canvas = document.createElement("canvas")


        canvas.width = 1024;
        canvas.height = 683;
        let ctx = canvas.getContext("2d")
        let gqImg = new Image();

        gqImg.onload = function () {
            init()
        }

        function init() {
            canvas.width = 1024;
            ctx.drawImage(gqImg, 0, 0, gqImg.width, gqImg.height);
            let startPx = 0
            let stopPx = gqImg.height
            let step = 255 / (stopPx - startPx)
            let imgData = ctx.getImageData(0, 0, gqImg.width, gqImg.height)
            let imgColor = [];
            let arr = []
            for (let i = 0; i < imgData.data.length; i += 4) {
                let r = imgData.data[i + 0]
                let g = imgData.data[i + 1]
                let b = imgData.data[i + 2]
                let a = imgData.data[i + 3]
                arr.push({ r: r, g: g, b: b, a: a })
                if (arr.length >= gqImg.width) {
                    imgColor.push(arr)
                    arr = []

                }
            }
            let i = 0;
            for (let x = 0; x < imgData.length; x++) {
                for (let y = startPx; y < stopPx; y++) {
                    imgColor[x][y].a = 255 - step * i;
                    i++
                }
                i = 0
            }
            i = 0;
            for (let x = 0; x < imgColor.length; x++) {
                for (let y = 0; y < imgColor[x].length; y++) {
                    imgData.data[i++] = imgColor[x][y].r;
                    imgData.data[i++] = imgColor[x][y].g;
                    imgData.data[i++] = imgColor[x][y].b;
                    imgData.data[i++] = imgColor[x][y].a;
                }
            }

            /*
                获取x = 50 ,y = 200 的像素
                imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 0]; //r
                imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 1]; //g
                imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2]; //b
                imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 3]; //a

            */
            ctx.putImageData(imgData, 0, 0)

            let tempSrc = canvas.toDataURL("image/png")
            tmp.src = tempSrc

            canvas.width = gqImg.height;
            ctx.putImageData(imgData, 0, 0, 0, 0, gqImg.height, gqImg.height)

            let tempSrc1 = canvas.toDataURL("image/png")
            头像.src = tempSrc1
        }
        gqImg.src = "image/guoqi1024.png";
        userImage.onload = function () {
            init()
            ctx.globalCompositeOperation = "destination-atop"
            ctx.drawImage(userImage, 0, 0, canvas.width, canvas.height);

            var tempSrc = canvas.toDataURL("image/png")
            头像.src = tempSrc


        }

        let fileReader = new FileReader();
        fileReader.onload = () => {
            userImage.src = fileReader.result
        };
        file.onchange = function () {
            fileReader.readAsDataURL(file.files[0]);
        }


    </script>
</body>

</html>